<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>
        <canvas id="canvas" width="400" height="300"></canvas>
    </div>
    <script>
        // 1、创建一个容器，一保存Canvas内绘制的元素点
        // 绘制矩形集合
        var rects = []
        function rectar(x, y, width, height) {
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.isSelected = false
        }
        // 绘制矩形框
        function drawRect() {
            // 清楚画布，准备绘制
            context.clearRect(0, 0, canvas.width, canvas.height);
            // 遍历所有矩形框
            for (let i = 0; i < rects.length; i++) {
                var rect = rects[i]
                // 绘制矩形
                context.strokeStyle = '#FF0000';
                context.strokeRect(rect.x, rect.y, rect.width, rect.height, rect.color);
                // 判断是否被选择
                if (rect.isSelected) {
                    context.lineWidth = 50
                } else {
                    context.lineWidth = 10
                }

            }
        }

        // 动态添加矩形
        function addRandomRect() {
            var x = 10;
            var y = 10;
            var width = 100;
            var height = 100;
            // 创建一个新的矩形对象
            var rect = new rectar(x, y, width, height)
            // 将它保存到数组中
            rects.push(rect);
            // 重新绘制画布
            drawRect()
        }

        // Canvas点击事件
        var SelectRect, x1, y1, widthstart, widthend, heightstart, heightend;
        var right = false
        function canvasClick(e) {
            // 取得画布上被点击的点
            var clickX = e.pageX - canvas.offsetLeft;
            var clickY = e.pageY - canvas.offsetTop;
            // 查找被点击的矩形框
            for (var i = 0; i < rects.length; i++) {
                var rect = rects[i]
                widthstart = rect.x
                widthend = rect.x + rect.width
                heightstart = rect.y
                heightend = rect.y + rect.height

                // 判断这个点是否在矩形内
                if ((clickX >= widthstart && clickX < (widthend - 20)) && (clickY >= heightstart && clickY < (heightend - 20))) {
                    console.log(clickX)
                    if (SelectRect != null) {
                        SelectRect.isSelected = false;
                        SelectRect = rect
                        x1 = clickX - SelectRect.x;
                        y1 = clickY - SelectRect.y;
                        // 选择新的圆圈
                        rect.isSelected = true;

                        // 使圆圈允许拖拽
                        isDragging = true
                        // 更新显示
                        drawRect()
                        // 停止搜搜
                        return
                    }

                }

                // 设置拉伸的界限
                if ((clickX >= (widthend - 20)) && (clickY >= (heightend - 20))) {
                    SelectRect = rect
                    right = true
                }

            }
        }

        function dragCircle(e) {
            // 判断是否开始拖拽
            if (isDragging == true) {
                // 判断拖拽对象是否存在
                if (SelectRect != null) {
                    // 取得鼠标的位置
                    var x = e.pageX - canvas.offsetLeft;
                    var y = e.pageY - canvas.offsetTop
                    // 将圆圈移动到鼠标位置
                    SelectRect.x = x - x1
                    SelectRect.Y = y - y1

                    // 更新画布
                    drawRect()
                }
            }

            // 判断是否开始拉伸
            if (right) {
                // 设置拉伸最小的边界
                if ((e.pageX - canvas.offsetLeft - SelectRect.x) > 50) {
                    SelectRect.width = e.pageX - canvas.offsetLeft - SelectRect.x;
                } else {
                    SelectRect.width = 50;
                }
                console.log(SelectRect.width)
                if ((e.pageY - canvas.offsetTop - SelectRect.y) > 50) {
                    SelectRect.height = e.pageY - canvas.offsetTop - SelectRect.y
                } else {
                    SelectRect.height = 50
                }
                drawRect()
            }
        }


        var isDragging = false;
        function stopDragging() {
            isDragging = false
            right = false
        }
        function clearCanvas() {
            // 去除所有的矩形
            rects = []
            // 重新绘制画布
            addRandomRect()
        }

        window.onload = function () {
            canvas = document.getElementById('canvas')
            context = canvas.getContext('2d')
            addRandomRect()
            canvas.onmousedown = canvasClick;
            canvas.onmouseup = stopDragging;
            canvas.onmouseout = stopDragging;
            canvas.onmousemove = dragCircle
        }



    </script>
</body>

</html>